<script setup lang="jsx">
import { computed, onMounted } from "vue"
import { useSystemStore } from "@/stores"
import { formatJSON } from "@/utils"

const systemStore = useSystemStore()
const dict = computed(() => systemStore.dict || [])
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  tag: {
    type: Boolean,
    default: false,
  },
})

const textList = computed(() => {
  if (dict.value?.length === 0) {
    return []
  }
  const val = formatJSON(props?.value)
  if (!val) {
    return []
  }
  const textArr = dict.value
    ?.filter(item => val?.includes(item?.value))
    ?.map(item => item?.label)
  if (textArr?.length === 0) {
    return []
  }
  return textArr
})

onMounted(() => {
  systemStore.initDictData()
})
</script>

<template>
  <template v-if="textList?.length">
    <el-space :size="8" v-if="tag">
      <el-tag
        type="info"
        v-for="(item, index) in textList"
        :key="index"
        size="small"
      >
        {{ item }}
      </el-tag>
    </el-space>
    <span v-else>{{ textList?.join("、") }}</span>
  </template>
  <span v-else>--</span>
</template>

<style scoped></style>
